<template>
  <div>
    <el-dialog v-bind="dialogProps1" :before-close="handleClose" :close-on-click-modal="false" :destroy-on-close="true"
               v-dialogDrag>
      <div style="overflow: hidden;" id="xGridParent">
        <!-- <vxe-grid ref='xGrid' v-bind="grid_options" @form-reset="formResetEvent">
        </vxe-grid> -->
        <vxe-table border stripe height="530" :data="list.data" @checkbox-all="selectAllEvent"
                   @checkbox-change="selectChangeEvent" ref="xTable">
          <vxe-column type="seq" width="60" title="序号" align="center"></vxe-column>
          <vxe-column field="gldwmc" width="120" title="单位" align="center"></vxe-column>
          <vxe-column field="sbmc" width="120" title="设备名称" align="center"></vxe-column>
          <vxe-column field="ccbm" width="120" title="出厂编码" align="center">
            <template v-slot="{ row }">
              <span style="color:#0000FF;cursor: pointer;" @click="handleAuditPass(row)">{{ row.ccbm }}</span>
            </template>
          </vxe-column>

          <vxe-column field="sblxmc" width="120" title="设备类型" align="center"></vxe-column>
          <vxe-column field="pt" width="120" title="PT" align="center"></vxe-column>
          <vxe-column field="ct" width="120" title="CT" align="center"></vxe-column>
          <vxe-column field="sbztmc" width="120" title="设备状态" align="center"></vxe-column>
          <vxe-column field="sskfmc" width="120" title="所属库房" align="center"></vxe-column>
          <vxe-column field="sbgg" width="120" title="规格" align="center"></vxe-column>
          <vxe-column field="xh" width="120" title="型号" align="center"></vxe-column>
          <vxe-column field="yxztmc" width="120" title="运行状态" align="center"></vxe-column>


        </vxe-table>
        <vxe-pager perfect size="mini" :current-page="list.pageNo" :page-size="list.pageSize"
                   :page-sizes="list.pageSizes" :total="list.total"
                   :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
                   @page-change="handlePageChange">
        </vxe-pager>
      </div>
    </el-dialog>
    <el-dialog top="5px"
               :title="formModel.title" :visible.sync="formModel.dialogVisible" :width="formModel.width"
               :closeOnClickModal="formModel.closeOnClickModal"
    >
      <accountQueryForm v-if="formModel.dialogVisible && formModel.componentId=='TBizcEneryEquipForm' "
                        :formData="formModel.TBizcEneryEquipFormData"
                        @closeEvent="tBizcEneryEquipFormCloseEvent"></accountQueryForm>
    </el-dialog>
  </div>
</template>

<script>
import {reactive} from 'vue'
import {formModel1, GridEvent1} from "../model/accountQuery-table"
// import { formModel, GridEvent } from "../model/equipmentMaintenance-table"
import {TBizcEneryEquipApi} from '@/api/equip/tBizcEneryEquipApi.js'
import VXETable from "vxe-table";

export default {
  name: 'censuTable',
  components: {
    accountQueryForm: () => import("./accountQueryForm.vue"),
    //  accountQueryForm: ()=>import("../components/equipmentMaintenanceForm.vue"),

  },
  data() {
    return {
      list: {
        data: [],
        pageNo: '1',
        pageSize: '10',
        pageSizes: [10, 20, 50, 100],
        total: 0
      },
      loading: false,

      GridEvent: reactive(GridEvent1),
      formModel: reactive(formModel1),
      showType: true,
      dialogProps1: {
        visible: false,
        title: '类型统计',
        width: "70%",
        top: "5px",
      },

      row: {},
      isEdit: false,
      isDisabled: false,

    }
  },
  methods: {
    // setTableHeight: function(){ //高度自�?�应//
    //    const tableContainer = document.querySelector("#xGridParent");
    //    const height = tableContainer.clientHeight;
    //    this.grid_options.height = height-5;

    // },
    queryData(list) {
      const queryParams = {
        sblxbm: this.row.sblxbm
      }
      const pageParams = {
        pageSize: list.pageSize,
        pageNo: list.pageNo,
        entity: queryParams,
        paramsMap: {},
        column: '',
        order: ''
      };

      TBizcEneryEquipApi.page(pageParams).then((res) => {
        this.list.data = res.data.records

        this.list.total = res.data.total

      })

    },
    handleAuditPass(row) {
      GridEvent1.viewForm(row, this.showType)

    },
    handlePageChange({currentPage, pageSize}) {
      this.loading = true
      this.list.pageNo = currentPage;
      this.list.pageSize = pageSize;
      this.queryData(this.list)
    },
    showDialog(isEdit, row, isDisabled, type) {

      this.isEdit = isEdit || false
      this.isDisabled = isDisabled || false
      this.row = row || {}
      this.showType = type
      this.dialogProps1.visible = true
      this.queryData(this.list)

    },

    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {

          this.dialogProps1.visible = false;
        })
        .catch((_) => {
        });
    },
    handleClose1(done) {
      this.$confirm("确认关闭？")
        .then((_) => {

          this.formModel.dialogVisible = false;
        })
        .catch((_) => {
        });
    },
    selectAllEvent() {

    },
    selectChangeEvent() {

    },
    tBizcEneryEquipFormCloseEvent() {
      this.formModel.dialogVisible = false;
      this.queryData(this.list)
    },
  },
  mounted() {
    this.$nextTick(function () {
      //  this.setTableHeight()
    })
    // window.addEventListener('resize',this.setTableHeight);
  },
  destroyed() {
    //  window.removeEventListener('resize',this.setTableHeight);
  },
}
VXETable.renderer.add('ccbm', {
  renderDefault(h, renderOpts, params) {
    const {events = {}} = renderOpts
    const {row, column} = params
    return [
      <span style="color:#0000FF;cursor: pointer;" onClick={
        () => {
          events.click(params.row)
        }
      }>{params.row.ccbm}</span>
    ]
  }
})
</script>

<style scoped>

</style>
